import React, { useState } from "react";
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";

import { Breadcrumb, Layout, Menu, theme } from "antd";
import styles from "./css/index.module.css";
const { Header, Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>["items"][number];
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}
// 9.完成左侧小说标题“类型”的渲染， 点击实现高亮切换
const items: MenuItem[] = [
  getItem("历史", "1", <PieChartOutlined />),
  getItem("言情", "2", <DesktopOutlined />),
  getItem("最热", "sub1", <UserOutlined />, [
    getItem("魔幻", "3"),
    getItem("炫酷", "4"),
    getItem("挑战", "5"),
  ]),
  getItem("炫酷", "sub2", <TeamOutlined />, [
    getItem("游戏", "6"),
    getItem("城堡", "8"),
  ]),
  getItem("古代爱情", "9", <FileOutlined />),
];

function Index() {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const shuju = [
    {
      img: "https://api.dicebear.com/7.x/miniavs/svg?seed=1",
      nei: "李白",
      neii: "上看看",
      neiiie: "算啦开始",
      neiii: "漱口水嗑生嗑漱口水看看刷卡刷卡刷卡手机登记登记登记",
    },
    {
      img: "https://api.dicebear.com/7.x/miniavs/svg?seed=2",
      nei: "白居易",
      neiiie: "算啦开始",
      neii: "上看看",
      neiii: "漱口水嗑生嗑漱口水看看刷卡刷卡刷卡手机登记登记登记",
    },
    {
      img: "https://api.dicebear.com/7.x/miniavs/svg?seed=3",
      nei: "黄鹤楼",
      neii: "上看看",
      neiiie: "算啦开始",
      neiii: "漱口水嗑生嗑漱口水看看刷卡刷卡刷卡手机登记登记登记",
    },
    {
      img: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
      nei: "历史",
      neii: "上看看",
      neiiie: "算啦开始",
      neiii: "漱口水嗑生嗑漱口水看看刷卡刷卡刷卡手机登记登记登记",
    },
  ];
  return (
    <div>
      <Layout style={{ minHeight: "100vh" }}>
        <Sider
          collapsible
          collapsed={collapsed}
          onCollapse={(value) => setCollapsed(value)}
        >
          <div className="demo-logo-vertical" />
          <Menu
            theme="dark"
            defaultSelectedKeys={["1"]}
            mode="inline"
            items={items}
          />
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: colorBgContainer }} />
          <Content style={{ margin: "0 16px" }}>
            <Breadcrumb
              style={{ margin: "16px 0" }}
              items={[{ title: "User" }, { title: "Bill" }]}
            />
            <div
              style={{
                padding: 24,
                minHeight: 360,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
              }}
            >
              {shuju.map((i, n) => (
                <div className={styles.dahezi} key={n}>
                  <div className={styles.tupian}>
                    <img
                      src={i.img}
                      alt=""
                      style={{ width: "100px", height: "100px" }}
                    />
                  </div>

                  <div className={styles.xiaohezi}>
                    <h4>{i.nei}</h4>
                    <h6>{i.neii}</h6>
                    <h6>{i.neiiie}</h6>
                    <h6>{i.neiii}</h6>
                  </div>
                </div>
              ))}
            </div>
          </Content>
          <Footer style={{ textAlign: "center" }}>
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    </div>
  );
}

export default Index;
